import { Form, Input, Modal } from 'antd';
import React from 'react';

import type { TenantAddItem } from '../data.d';

interface AddFormProps {
  onSubmit: (values: TenantAddItem) => void;
  onCancel: (flag?: boolean) => void;
  modalVisible: boolean;
}

// const formItemLayout = {
//   labelCol: {
//     xs: { span: 0 },
//     sm: { span: 0 },
//   },
//   wrapperCol: {
//     xs: { span: 24 },
//     sm: { span: 24 },
//   },
// };

const AddForm: React.FC<AddFormProps> = (props) => {
  const [form] = Form.useForm();

  const {
    onSubmit: handleAdd,
    onCancel: handleAddModalVisible,
    modalVisible: addModalVisible,
  } = props;

  const onModalOk = async () => {
    const fieldsValue = (await form.validateFields()) as TenantAddItem;
    handleAdd(fieldsValue);
  };
  return (
    <Modal
      title="新建客户"
      visible={addModalVisible}
      destroyOnClose
      onOk={() => onModalOk()}
      onCancel={() => handleAddModalVisible(false)}
      afterClose={() => handleAddModalVisible()}
      okText="确定"
      cancelText="取消"
      style={{ marginTop: 150 }}
    >
      <Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 14 }}>
        <Form.Item name="name" label="客户名称" rules={[{ required: true, message: '必填' }]}>
          <Input />
        </Form.Item>
        <Form.Item
          name="topUserName"
          label="客户管理账号"
          rules={[{ required: true, message: '必填' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item name="password" label="客户密码">
          <Input type={'password'} />
        </Form.Item>
        {/* <Form.Item
          name="dataBoardUrl"
          label="智慧大屏链接"
          rules={[{ required: true, message: '必填' }]}
        >
          <Input />
        </Form.Item> */}
        <div>若密码为空则默认为123456</div>
      </Form>
    </Modal>
  );
};
export default AddForm;
